# output.sourceMap

- **类型：**

```ts
type SourceMap =
  | boolean
  | {
      js?: Rspack.Configuration['devtool'];
      css?: boolean;
    };
```

- **默认值：**

```ts
const defaultSourceMap = {
  js: mode === 'development' ? 'cheap-module-source-map' : false,
  css: false,
};
```

用于设置是否生成 source map 文件，以及生成哪一种格式的 source map。

:::tip 什么是 source map
source map 是保存源代码映射关系的信息文件，它记录了编译后的代码的每一个位置，以及所对应的编译前的位置。通过 source map，可以在调试编译后的代码时，直接查看对应的源代码。
:::

## 默认行为

默认情况下，Rsbuild 的 source map 生成规则如下：

- 在开发模式构建时，会生成 JS 文件的 source map，便于进行开发调试；不会生成 CSS 文件的 source map。
- 在生产模式构建时，不会生成 JS 和 CSS 文件的 source map，以提供最佳的构建性能。

## 布尔值

如果 `output.sourceMap` 为 `true`，则会根据 [mode](/config/mode) 生成 JS 和 CSS 文件的 source map，等价于：

```js
export default {
  output: {
    sourceMap: {
      js: mode === 'development' ? 'cheap-module-source-map' : 'source-map',
      css: true,
    },
  },
};
```

如果 `output.sourceMap` 为 `false`，则不会生成 JS 和 CSS 文件的 source map，等价于：

```js
export default {
  output: {
    sourceMap: {
      js: false,
      css: false,
    },
  },
};
```

## JS Source Map

JS 文件的 source map 通过 `sourceMap.js` 来控制，可以传入 Rspack [devtool](https://rspack.dev/zh/config/devtool) 选项支持的所有 source map 格式，设置为 `false` 为关闭。

比如，如果你需要在所有模式生成高质量的 source map，可以设置为：

```js
export default {
  output: {
    sourceMap: {
      js: 'source-map',
    },
  },
};
```

你也可以根据 `NODE_ENV` 来设置不同的 source map 格式：

```js
export default {
  output: {
    sourceMap: {
      js:
        process.env.NODE_ENV === 'production'
          ? // 生产模式使用高质量的 source map 格式
            'source-map'
          : // 开发模式使用性能更好的 source map 格式
            'cheap-module-source-map',
    },
  },
};
```

## CSS Source Map

CSS 文件的 source map 通过 `sourceMap.css` 来控制，设置为 `true` 为开启，设置为 `false` 为关闭。

比如，如果需要生成 CSS 文件的 source map，可以设置为：

```js
export default {
  output: {
    sourceMap: {
      css: true,
    },
  },
};
```

在生产构建时，我们不推荐同时开启 [output.injectStyles](/config/output/inject-styles) 和 `output.sourceMap.css`，因为 `output.injectStyles` 会将 source map 注入到 JS 文件中，这会增加文件的体积并导致页面加载变慢。

你可以仅在开发模式下开启 CSS 文件的 source map：

```js
export default {
  output: {
    injectStyles: true,
    sourceMap: {
      css: process.env.NODE_ENV === 'development',
    },
  },
};
```
